<template>
    <div class="active mt10" v-for="item in listData">
        <div class="banner">
            <a href="{{item.link}}"><img src="{{item.LogoFile}}" alt=""></a>
            <i v-if="(item.Attribute & 2) ==2" class="icon-video icon-video-1">视频</i>
            <i v-else class="icon-video">文章</i>
            <i v-if="(item.Attribute & 2) ==2" class="icon-time">{{item.Duration}}</i>
        </div>
        <div class="content">
            <h3>{{item.title}}</h3>
            <h5>{{item.Subtitle}}</h5>
            <hr/>
            <span class="icon-video num" id="num_{{item_}}"><i></i> 23.17万</span>
        </div>
    </div>

</template>
<script>
    import common from '../../../utils/common';
    export default {
        data:function(){
            return {
                listData:''
            }
        },
        ready:function(){
            // debugger;
            // //document.querySelectorAll('.icon-video');
            // for(var item in this.listData){
            //     console.info(item.id);
            // }
        },
        events:{
            listData:function(data){                
                this.listData = data;
                console.info(data)
                debugger;
                for(var i,len = this.listData.length;i<len;i++){
                    console.info(i);
                    //var id = this.listData[i].id;
                    // this.$http.get( common.isdev() + '/service/discovery/addPageView/0',{'articleId':id}).then(function ( data ) {

                    //         console.info(i);
                    //     },function(){

                    //     });
                        
                }
            }
        }

    }
</script>

<style lang="scss" scope>
@import "../../../assets/css/_functions.scss";
@import "../../../assets/css/_variables.scss";
.active{
    background:$_fff;
    .banner img{
        width:rem(375);
        height:rem(160);
    }
    .banner{
        position: relative;
        i.icon-video{
            width:rem(28);
            height:rem(28);
            background:#000;
            border-radius:rem(28);
            display:inline-block;
            position: absolute;
            left:rem(17);
            bottom:rem(7);
            text-align:center;
            color:#fff;
        }
        i.icon-time{
            display: inline-block;
            width:rem(50);
            height:rem(17);
            position: absolute;
            bottom:rem(12);
            right:rem(17);
            background:#000;
            color:#fff;
            text-align:center;
            line-height:rem(17);
            font-size:rem(12);
        }
    }
    .content{
        padding:rem(10) rem(25);
        h3{
            font-size:rem(14);
            line-height:rem(20);
            color:$_243742;
        }
        h5{
            font-size:rem(12);
            line-height:rem(17);
            color:#8392a0;
        }
        hr{
            width:rem(60);
            height:rem(1);
            background-color:#e6ded4;
            margin:rem(10) 0;
        }
        .icon-video i{
            width:rem(25);
            height:rem(10);
            background:#8392a0;
            display:inline-block;
            margin-right:rem(5);
        }
        .icon-video{
            font-size:rem(12);
            line-height:rem(17);
            color:#8392a0;
        }
    }
}

</style>
